<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.1.0.min.js"></script>
    <style type="text/css">
        #div1{
            width: 500px;
            height: 200px;
            border: 3px solid blue;
        }
        #div2{
            width: 400px;
            height: 150px;
            margin-top: 10px;
            margin-left: 10px;
            border: 3px solid blue;
        }
        p{
            margin-left: 10px;
            margin-top: 10px;
            width: 150px;
            height: 80px;
            border: 3px solid blue;
        }
    </style>
</head>
<body>
   <div id="div1">div1
       <div id="div2">div2
           <p>p元素
               <a>
                    hello world
               </a>
           </p>
       </div>
   </div>

    <script>
        /*向上遍历的方法：
        parent（）:只针对父亲
        parents（）:针对所有祖辈
        parentsUntil():*/
        $(document).ready(function(){
           /* $("a").parent().css({border:"3px solid red"})；*/
           /* $("a").parents().css({border:"3px solid red"})*/
            $("a").parentsUntil("#div1").css({border:"3px solid red"})//有区间，到div1为止的祖父元素
         })
    </script>
</body>
</html>